<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<title>地图显示</title>
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<!-- 加载地图JSAPI脚本 -->
		<script src="https://webapi.amap.com/maps?v=2.0&key=f4b1de31f2285957a4f4b8e79984715d"></script>
		<script>
			var map = new AMap.Map('container', {
				viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
				zoom: 16, // 初始化地图层级
				center: [120.23972350661, 31.52510537604] // 初始化地图中心点
			});
			var position = new AMap.LngLat(120.23972350661, 31.52510537604);
			// 点标记显示内容，HTML要素字符串
			var markerContent = '' +
				'<div class="custom-content-marker">' +
				'   <img src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
				'   <div class="close-btn" onclick="clearMarker()">黑人</div>' +
				'</div>';
			
			// // 将 markers 添加到地图
			// 
			var marker=null;
			map.add(marker);
			
			function clearMarker() {
				map.remove(marker);
			}
		</script>
		<script src="index.js"></script>
	</body>
</html>